<template>
    <div :class="isUpdate&&'fadeIn'">
        <div v-if="templateStyle==='level-4'" class="theme-1">
            <div>
                <div class="template-content">
                    <div class="top-title">
                        {{content.sentence}}
                    </div>
                    <div class="split-line" @click="setOption">
                        <span class="pit"
                              v-for="(item,index) in answerArr">{{item.chinese || item.pinyin || item.english}}</span>
                    </div>
                    <div class="word-wrap">
                            <span class="pit"
                                  v-for="(item,index) in wordArr"
                                  @click="getOption($event,index,item,item.order)">{{item.chinese || item.pinyin || item.english}}</span>
                    </div>

                </div>
            </div>
        </div>
        <div v-if="templateStyle==='level-3'" class="theme-2">
            <div>
                <div class="template-content">
                    <div class="top-title">
                        <p>{{content.sentence}}</p></div>
                    <div class="split-line" @click="setOption">
                        <span class="pit"
                              v-for="(item,index) in answerArr">{{item.chinese || item.pinyin || item.english}}</span>
                    </div>
                    <div class="word-wrap">
                            <span class="pit"
                                  v-for="(item,index) in wordArr"
                                  @click="getOption($event,index,item,item.order)">{{item.chinese || item.pinyin || item.english}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState, mapActions, mapMutations} from 'vuex';
    import R from 'ramda';
    import loadingImage from '~/components/loadingImage'
    import draggable from 'vuedraggable'

    export default {
        async fetch({store, params}) {
            await store.dispatch("index/exercise/index/setContentInfo", params);
        },

        data() {
            return {
                answerArr: [],
                correctArr: [],
                isUpdate: false,
                myAnswer: ''
            }
        },
        methods: {
            ...mapActions('index/exercise/index', [
                'setAnswer','setMyAnswer'
            ]),
            ...mapMutations('index/exercise/index', [
                'CompareControl',
            ]),
            setOption(e) {
                if (this.answerArr[this.answerArr.length - 1]) {
                    this.wordArr.push(this.answerArr[this.answerArr.length - 1]);
                    this.answerArr.pop();
                    this.correctArr.pop();
                    this.Answer();
                }
            },
            getOption(e, index, item, order) {
                this.answerArr.push(this.wordArr[index]);
                this.correctArr.push(order);
                this.wordArr.splice(index, 1);
                this.Answer();
            },
            Answer() {
                this.myAnswer = '';
                let answer = false;
                if (this.content.answerOrder) {
                    for (let i = 0; i < this.content.answerOrder.length; i++) {
                        if (this.correctArr.toString() === this.content.answerOrder[i]) {
                            answer = true;
                        }
                    }
                }
                const or = R.curry((a, b, c, d) => (a(d) || b(d) || c(d)));
                this.setAnswer({
                    answer: answer,
                    msg: this.content.answerSentences && R.pipe(R.map(or(R.prop("chinese"), R.prop("english"), R.prop("pinyin"))), R.join("、"))(this.content.answerSentences)
                });
                for(let p of this.answerArr){
                    this.myAnswer += p.chinese;
                }
                this.setMyAnswer(this.myAnswer);
            },
            init() {
                const or = R.curry((a, b, c, d) => (a(d) || b(d) || c(d)));
                this.$nextTick(_ => {
                    this.CompareControl(true);
                    this.setAnswer({
                        answer: false,
                        msg: this.content.answerSentences && R.pipe(R.map(or(R.prop("chinese"), R.prop("english"), R.prop("pinyin"))), R.join("、"))(this.content.answerSentences)
                    });
                })
            }
        },
        destroyed() {
            this.CompareControl(null);
        },
        mounted() {
            this.init();
        },
        created() {
        },
        computed: {
            wordArr() {
                const wordArr = [];
                if (this.content.words) {
                    for (let i = 0; i < this.content.words.length; i++) {
                        wordArr.push(this.content.words[i]);
                    }
                }
                return wordArr.sort(function () {
                    return Math.random() - 0.5
                });
            },
            ...mapState('index/exercise/index', {
                templateStyle: state => state.templateStyle,
                contentInfo: state => state.contentInfo,
                content: state => state.contentInfo ? state.contentInfo.content : {}
            }),
        },
        watch: {
            content() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {
                    answerArr: [],
                    correctArr: [],
                };
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                this.$nextTick(_ => {
                    this.optionArr = R.clone(this.content.words);
                })
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600);
                this.init();

            }
        },

        components: {
            loadingImage,
        }
    }
</script>

<style lang="scss" scoped>
    .fadeIn {
        animation: fadeIn .4s ease-in;
        transform: translateZ(0);
    }

    @keyframes fadeIn {
        from {
            transform-origin: left;
            transform: scaleX(.4);
            opacity: 0;
        }
    }

    @import "~~assets/sass/functions";
    .theme-1 {
        text-align: center;
        .word-wrap {
            width: 1000px;
            margin: 0 auto;
        }
        .pit {
            background: url(~~assets/img/main_content/exercise/read-choose-pit.png) no-repeat;
            background-size: 100% 100%;
            font-size: 30px;
            padding: 10px 0;
            color: #071f30;
            text-align: center;
            display: inline-block;
            min-width: 150px;
            min-height: 40px;
            font-weight: 400;
            font-style: normal;
            margin: 10px 20px;
            line-height: normal;
        }
        .template-content {
            display: inline-block;
        }
        .template-content .top-title {
            background: url(~~assets/img/main_content/exercise/read-content-bg.png) no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            min-width: 600px;
            max-width: 900px;
            padding: 40px 60px;
            margin-top: 50px;
            font-size: 36px;
            color: #339;
            text-align: center;
            font-weight: 400;
            font-style: normal;
        }
        .template-content .split-line {
            $width: 900px;
            min-width: $width;
            max-width: 9rem;
            display: inline-block;
            min-height: 0.7rem;
            background: url("~~assets/img/main_content/course/l4-sentence-line.png") center 100% no-repeat;
            background-size: 100%;
            text-align: center;
            position: relative;
            margin: 50px auto auto;
            padding-bottom: 15px;
            .pit {
                min-width: 120px;
                min-height: 20px;
                vertical-align: middle;
                font-size: 20px;
                color: #1b2043;
                margin: 5px;
            }
        }
        .template-content .options {
            width: 1000px;
            margin: 20px auto;

        }

    }

    .theme-2 {
        text-align: center;
        .template-content {
            display: inline-block;
        }
        .pit {
            background: url(~~assets/img/main_content/exercise/button-yellow.png) no-repeat;
            background-size: 100% 100%;
            padding: 20px 0;
            font-size: 30px;
            color: #071f30;
            text-align: center;
            display: inline-block;
            min-width: 200px;
            min-height: 40px;
            font-weight: 400;
            font-style: normal;
            line-height: normal;
        }
        .template-content .top-title {
            background: url(~~assets/img/main_content/exercise/bg-yellow.png) no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            min-width: 600px;
            max-width: 8rem;
            padding: 40px 60px;
            margin-top: 50px;
            font-size: 36px;
            color: #ffffff;
            text-align: center;
            font-weight: 400;
            font-style: normal;
            p {
                text-align: left;
                display: inline-block;
                vertical-align: middle;
            }
        }
        .template-content .split-line {
            width: 8rem;
            min-height: 1.033735rem;
            background: url(~~assets/img/main_content/exercise/line-yellow.png) no-repeat;
            background-position: 0 100%;
            background-size: 100%;
            text-align: center;
            position: relative;
            /* white-space: nowrap; */
            margin: .5rem auto auto;
            padding-bottom: 10px;
            .pit {
                min-width: 120px;
                min-height: 30px;
                vertical-align: middle;
                font-size: 20px;
                color: #333e80;
            }
        }
        .word-wrap {
            width: 8rem;
            margin: 0 auto;
        }
        .template-content .options {
            width: 1000px;
            margin: 10px auto;

        }

    }
</style>
